<!-- 诉求上报添加(企业端) -->
<template>
 <div>
        <el-form ref="form" :model="form" label-width="140px">
          <el-form-item>
          <el-button type="primary" @click="usersave">使用上次保存的模板</el-button>
          </el-form-item>
            <el-form-item label="诉求类型" prop="appealtypeId">
            <el-select v-model="form.appealtypeId" placeholder="请选择"  size="small" style="float:left">
            <!-- <el-option key='0' label="不限" value="不限"></el-option> -->
            <el-option
                v-for="item in appealtype"
                :key="item.appealtypeId"
                :label="item.appealtypeName"
                :value="item.appealtypeId">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="紧急程度" prop="urgency">
          <el-select v-model="form.urgency" placeholder="紧急程度">
               <!-- <el-option key='0' label="不限" value="不限"></el-option> -->
               <el-option
                   v-for="item in teji"
                   :key="item.id"
                   :label="item.Name"
                   :value="item.id">
               </el-option>
               </el-select>
        </el-form-item>
        <el-form-item label="诉求主题">
            <el-input v-model="form.appealthemeName"></el-input>
        </el-form-item>
        <el-form-item label="诉求内容">
            <el-input type="textarea" v-model="form.appealcontent"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即上报</el-button>
            <el-button @click="goBack" type="text" size="small">返回</el-button>
        </el-form-item>
        </el-form>
 </div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'appealreportingUserAdd',
  data () {
    return {
      form: {
        appealthemeName: '',
        appealcontent: '',
        feedbackcontent: '',
        saveStatus: '',
        userId: localStorage.getItem('userId'),
        tradeId: localStorage.getItem('tradeId'),
        appealtypeId: ''
      },
      selectapplebysavestatusUrl: 'http://localhost:8081/appeal/selectapplebysavestatus',
      selectAllappealtypeUrl: 'http://localhost:8081/appeal/selectAllappealtype',
      appealAddUrl: 'http://localhost:8081/appeal/appealAdd',
      applebysavestatusUpdateUrl: 'http://localhost:8081/appeal/applebysavestatusUpdate',
      appealtype: [],
      userId: localStorage.getItem('userId'),
      teji: [
        {
          id:1,
          Name:'一般'
        },
        {
          id:2,
          Name:'紧急'
        },
        {
          id:3,
          Name:'特急'
        }
      ]
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },

    usersave () {
      alert(this.userId)
      axios.get(this.selectapplebysavestatusUrl + '/'+this.userId).then(
        res => {
          console.log(res.data)
          this.form = res.data
          // if (this.form.urgency === 1) {
          //   this.form.urgency = '一般'
          // } else if (this.form.urgency === 2) {
          //   this.form.urgency = '紧急'
          // } else if (this.form.urgency === 3) {
          //   this.form.urgency = '特急'
          // }
        }
      ).catch(
        err => {
          alert("您之前没有保存过草稿箱")
          console.log(err)
        }
      )
    },

    selectappealtype () {
      axios.get(this.selectAllappealtypeUrl).then(
        res => {
          console.log(res.data)
          this.appealtype = res.data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },

    onSubmit () {
      const _this = this
      this.$confirm('是否保存为草稿?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
        distinguishCancelAndClose: true, // 重要，设置为true才会把右上角X和取消区分开来
        closeOnClickModal: false
      }).then(function () {
        // TODO 确认通过执行逻辑
        _this.appealsavestatusUpdate()
        this.$router.push('/appealreportingUser')
      }).catch(function (e) {
        if (e === 'cancel') {
          // TODO 确认不通过执行逻辑
          _this.appealadd()
          this.$router.push('/appealreportingUser')
        } else if (e === 'close') {
          // TODO 右上角X的执行逻辑
        }
      })
    },

    appealadd () {
      axios.post(this.appealAddUrl, this.form).then(
        res => {
          console.log(res.data)
          if (res.data === 'success') {
            this.$router.push('/appealreportingUser')
          }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    },
    appealsavestatusUpdate () {
      axios.post(this.applebysavestatusUpdateUrl, this.form).then(
        res => {
          console.log(res.data)
          if (res.data === 'success') {
            this.$router.push('/appealreportingUser')
          }
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    }

  },

  mounted () {
    this.selectappealtype()
  }

}
</script>

<style>
    .el-input__inner{
    width: 60%;

    }
    /* .el-input{
    text-align: left;
    }*/
    .el-form-item__label{
    /* background-color: rgb(43, 83, 214);
    color: white; */
    text-align: right;
    }
    .el-form-item{
    width: 50%;
    text-align: left;
    margin-top: 30px;
    margin-left: 30px;
    }
</style>
